<template>
   <!--第一层一定要用包裹不要有兄弟节点-->
    <div class="app home">
      <div class="main-content">
        <div class="home-banner">
          <img class="banner-img" src="../../assets/images/home/icon-banner-normal.png" alt="">
        </div>
        <div class="introduction group-item">
          <a class="item horizontal intr-con intro-one" href="/page/about/about.html">
            <div class="icon-con icon-home-about">

            </div>
            <span class="icon-txt">关于钱香</span>
          </a>
          <a class="item horizontal" href="/page/borrow-strategy/borrow-strategy.html">
            <div class="icon-con icon-home-guide">
            </div>
            <span class="icon-txt">借款攻略</span>
          </a>
        </div>
        <div class="gold-store">
          <div class="group-title">
            <div class="item-title ">
              <div class="icon-con icon-home-gold-store"></div>
            </div>

          </div>
          <div class="specialty">
            <div class="special-list">
              <div class="item list-icon icon-home-charge"></div>
              <div class="item list-line"></div>
              <div class="item list-con">
                <span class="list-con-txt top-txt">费用少</span>
                <span class="list-con-txt down-txt">无其他费用，月息1分至1分2</span>
              </div>
            </div>
            <div class="special-list">
              <div class="item list-icon icon-home-fast"></div>
              <div class="item list-line"></div>
              <div class="item list-con">
                <span class="list-con-txt top-txt">放款快</span>
                <span class="list-con-txt down-txt">资料齐全，最快3-5天放款</span>
              </div>
            </div>
            <div class="special-list">
              <div class="item list-icon icon-home-agility"></div>
              <div class="item list-line"></div>
              <div class="item list-con">
                <span class="list-con-txt top-txt">期限灵活</span>
                <span class="list-con-txt down-txt">按天借款，分1/3/6/12/18/24月期</span>
              </div>
            </div>
          </div>
          <a class="btn-common-blue to-apply" href="/home/apply/apply">申请借款</a>
        </div>
        <div class="more-service">
          <div class="more-top">驰展控股旗下借贷信息服务</div>
          <div class="more-down"><span>—</span> 更多服务 敬请期待 <span>—</span></div>
        </div>
      </div>
      <tab-bar :active_index = '0'></tab-bar>
    </div>




</template>
<script>
  import store from '@/store/index';
  import tabBar from '@/components/TabBar'

  export default {
    data(){
      return {
        name: 'XX',
      };
    },
    mounted(){

    },
    methods: {},
    components: {tabBar}
  }

</script>

<style lang="scss">
  @import "../../assets/scss/variate";
  .icon-home-about{
    background-image: url("../../assets/images/home/icon-home-about.png");
  }
  .icon-home-guide{
    background-image: url("../../assets/images/home/icon-home-guide.png");
  }
  .icon-home-gold-store{
    background-image: url("../../assets/images/home/icon-home-gold-store.png");
  }
  .icon-home-agility{
    background-image: url("../../assets/images/home/icon-home-agility.png");
  }
  .icon-home-charge{
    background-image: url("../../assets/images/home/icon-home-charge.png");
  }
  .icon-home-fast{
    background-image: url("../../assets/images/home/icon-home-fast.png");
  }

  .home{
    .group-item{
      display: flex;
      .item{
        flex: 1;
        &.horizontal{
          display: flex;
          flex-direction:row;
          align-items: center;
          justify-content: center;
        }
        .icon-con{
          width: .9rem;
          height: .9rem;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
        .icon-txt{
          color:#333333;
          font-size: .3rem;
          margin-left: .13rem;
        }
      }
    }
    .group-title{
      padding:.2rem .23rem;
      border-bottom:1px solid $default-border;
      .item-title{
        border-left: .04rem solid $word-main-color;
        padding-left: .17rem;
        height: .31rem;
        .icon-con{
          width: .98rem;
          height: .31rem;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;

        }
      }
    }
    .main-content{
      .home-banner{
        .banner-img{
          width: 100%;
          vertical-align: top;
        }
      }
      .introduction{
        padding: .14rem 0;
        background-color: #fff;
        margin-bottom: .2rem;
        .intr-con{
          &.intro-one{
            border-right: 1px solid $default-border;
          }
        }
      }
      .gold-store{
        background-color: #fff;
        padding-bottom: .69rem;
        .to-apply{
          margin-top: .52rem;
          box-shadow:0 0.16rem .16rem  #c5e3f5;
        }
        .specialty{
          padding: .48rem .23rem 0 .23rem;
          .special-list{
            height: .88rem;
            display: flex;
            flex-direction: row;
            justify-content:flex-start;
            align-items:center;
            padding-left: .59rem;
            margin-bottom: .44rem;
            &:last-child{
              margin-bottom: 0;
            }
            .item{
            }
            .list-icon{
              width: .88rem;
              height: .88rem;
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
            }
            .list-line{
              height: .6rem;
              width: 1px;
              background-color: $default-border;
              margin: 0 .24rem;

            }
            .list-con{
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              height: .7rem;
              .list-con-txt{
                //align-items:center;
              }
              .top-txt{
                color:#333;
                font-size: .26rem;
              }
              .down-txt{
                font-size: .26rem;
                color:$text-success;
              }

            }
          }
        }

      }
    }
  }
</style>
